<template>
  <div class="department-container">
    <!-- <router-link to="/entry/register" /> -->
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <div class="administrator">超级管理员</div>
      </el-card>
      <div>
        <el-form ref="formData" style="margin: 0; padding: 0;" :inline="true" label-width="100px" :model="formData">
          <span>
            <el-form-item class="jobPosition" style="margin-left: 10px;" label="应聘岗位" prop="jobPosition">
              <el-select
                v-model="formData.jobPosition"
                style="width: 195px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in employType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </span>

          <!-- <span>
            <el-form-item class="sex" style="margin-left: 20px;" label="性别" prop="sex">
              <el-select
                v-model="formData.sex"
                style="width: 195px;"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in employSex"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </span> -->

          <!-- <template class="eductionBox">
            <el-form-item class="eduction" label="学历">
              <el-input v-model="formData.eduction" style="width: 195px;" />
            </el-form-item>
          </template> -->

          <div>
            <el-form-item class="date1" label="应聘日期">
              <el-col :span="11">
                <el-date-picker v-model="formData.date1" class="date2" type="date" placeholder="选择日期" style="width: 195px;" />
              </el-col>

            </el-form-item>
          </div>

          <!-- <el-form-item style="" label="婚姻状况" prop="marital">
            <el-select
              v-model="formData.marital"
              style="width: 195px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in employmarital"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-button style="width: 100px; " type="primary" @click="Condition()">搜索</el-button>
          <el-button style="width: 100px; " type="warning" @click="cleas">重置</el-button>
        </el-form>
      </div>

      <div class="choiceButtom">
        <div class="block">

          <!-- <span class="buttonTwo" /> -->
          <div class="buttonFive">
            <el-button class="buttons" type="primary">导入</el-button>
            <el-button class="buttons" type="primary">筛选导入</el-button>
            <el-button class="buttons" type="primary" @click="exportOut">全部导出</el-button>
            <el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
            >
              <img src="@/components/images/erweima.png">
              <el-button slot="reference" type="primary">生成常用二维码</el-button>
            </el-popover>
            <el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
              />
              <el-button slot="reference" type="primary">生成动态二维码</el-button>
            </el-popover>

          </div>

          <div class="tables">
            <el-table
              :header-cell-style="{background:'#f2f2f2',color:'#606266'}"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="selection"
              />
              <el-table-column
                style="text-align: center;"
                type="index"
                prop="order"
                label="序号"
                width="80"
              />

              <el-table-column
                prop="applyDate"
                label="应聘日期"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.applyDate | formatUTC }}
                </template>
              </el-table-column>

              <el-table-column
                prop="jobPosition"
                label="应聘岗位"
                width="180"
              >
                <template slot-scope="scope">
                  {{ format(scope.row.jobPosition) }}
                </template>
              </el-table-column>

              <el-table-column
                prop="appraiser"
                label="姓名"
                width="180"
              />

              <el-table-column
                prop="phone"
                label="联系方式"
              />

              <el-table-column
                prop="age"
                label="年龄"
                width="180"
              />

              <el-table-column
                prop="graduationSchool"
                label="毕业院校"
              />

              <el-table-column
                prop="major"
                label="专业"
              />

              <el-table-column
                prop="mail"
                label="邮箱"
                width="180"
              />

              <el-table-column
                prop="birthDate"
                label="出生日期"
                width="150"
              >
                <template slot-scope="scope">
                  {{ scope.row.birthDate | formatUTC }}
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="{row}">
                  <el-button
                    size="mini"
                    class="details"
                    type="#009688"
                    @click="handleDetails(row.id)"
                  >查看详情  <h4 style="padding-left: 10px; display: inline">|</h4></el-button>

                  <el-button
                    size="mini"
                    class="details"
                    type="#009688"
                    @click="handleOut(scope.$index, scope.row)"
                  >导出</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { getListJianli, postConditionQuery, postinfo, postououtexcel } from '@/api/resumeApi.js'
import { TYPE_MAP, TYPE_SEX, TYPE_marital, type } from '@/conents/index'
// import Vue from 'vue'
// const Event = new Vue()
export default {
  data() {
    return {
      sid: '',
      // QRcode: {
      //   imgurl: '',
      //   inputValue: ''
      // },
      employType: Object.keys(TYPE_MAP).map(key => { return { id: key, label: TYPE_MAP[key] } }),
      employSex: Object.keys(TYPE_SEX).map(key => { return { id: key, label: TYPE_SEX[key] } }),
      employmarital: Object.keys(TYPE_marital).map(key => { return { id: key, label: TYPE_marital[key] } }),
      formData: {
        jobPosition: '', // 应聘岗位
        sex: '', // 性别
        eduction: '',
        marital: '', // 婚姻状态
        date1: '' // 应聘日期
      },

      // 日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      options: '',
      value: '',
      // fit: '',
      url: '../../components/images/erweima.png',

      tableData: [{
        birthDate: '2000-11-11',
        mail: '2277128789@qq.com',
        jobPosition: '',
        order: 1,
        applyDate: '2016-05-02',
        appraiser: '王小虎',
        age: 18,
        sex: '男',
        graduationSchool: '中国',
        major: '计算机',
        education: '本科',
        addresst: '中国',
        phone: '13836985741'
      }]
    }
  },
  created() {
    this.loageGetListJianli()
  },
  methods: {
    async exportOut() {
      const res = await postououtexcel()
      const { header, data } = this.tableData(res.data.rows)
      console.log('员工信息', header, data)
      import('@/vendor/Export2Excel').then(excel => {
        // 准备数据
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // const data = this.formatJson(filterVal, list)
        // 生成excel
        excel.export_json_to_excel({
          header: ['姓名', '工资'],
          data: [
            ['1', 100],
            ['2', 500]
          ],
          // header, // 表头 必填
          // data, // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },

    format(arr) {
      return type[arr]
    },
    // generaterQRcode() {
    //   this.axios({
    //     methods: 'get',
    //     url: 'https://api.oick.cn/qrcode/api.php',
    //     responseType: 'blob',
    //     params: {
    //       text: this.QRcode.inputValue,
    //       size: 200
    //     }
    //   }).then((res) => {
    //     console.log('点击成功')
    //     console.log(res)
    //     const imgurl = window.URL.createObjectURL(res.data)
    //     this.QRcode.imgurl = imgurl
    //   })
    // },
    // 导出

    cleas() {
      this.$refs.formData.resetFields()
    },
    // 搜索
    async Condition() {
      // console.log('formData', formData)
      const res = await postConditionQuery(this.formData)
      this.formData = res.data
      console.log('chaxun', res.data)
      this.loageGetListJianli()
    },

    // 查询
    //  query() {

    //   // this.formData = res
    // },
    async loageGetListJianli() {
      const res = await getListJianli({})
      console.log('res', res.data.data)
    },
    // 查看详情
    handleDetails() {
      // console.log('111', id)
      // this.sid = id
      // const res = postinfo(this.sid)
      // console.log('postinfo', res)
      // this.formData = res.data
      this.$router.push('/entry')
      // Event.$emit('goods', this.sid)
    }

  }
}
</script>

<style  scoped>

.date2 {
  margin-top: 10px;
}
.date1 {
  /* margin-top: 50px; */
  float: left;
  /* padding-left: 10px; */

}
.sex {
  margin-top: 21px;

}
.eduction {
  margin-left: 100px;
  margin-top: 20px;

}
.jobPosition {
  float: left;
  margin-top: 20px;
}
.tables {
  margin-top: 30px;
}
.details {
  margin-left: -15px;
  background-color: transparent;
  border: none;
  color: blue;
  display: inline

}
.buttonFive {
  margin-top: 40px;
  margin-left: 106px;
}
.buttonFive .buttons {
  width: 130px;
  /* font-size: 18px; */
}
.buttonTwo button {
  margin-left: 5px;
}
.choiceButtom {
  margin-top: 10px;
}

.choiceButtom .block .marriage {
  margin-left: -31px;
}

.choiceButtom .block span {
  margin-right: 10px;
  margin-left: 75px;
  margin-top: 20px;
  color: #424242;
}
.choice  {
  margin-top: 20px;
}
.choice span {
  margin-right: 10px;
  margin-left: 75px;
  margin-top: 20px;
  color: #424242;
}
.app-container .administrator {
    display: flex;
    justify-content: right;
    padding-right: 50px;
    font-weight: bolder;
  }

</style>
